<template>
    <div id="cash_flow">
        <el-row :gutter="10" style="height: 100%">
            <el-col :span="16" style="height: 100%">
                <el-card class="card-100">
                    <el-row >
                        <el-col :span="24" style="height: 100%">
                            <div class="grid-content">
                                <el-row :gutter="20" class="mg-b-10">
                                    <el-col :span="12">
                                        <div class="grid-content">
                                            <el-input  size="mini" v-model="searchName" clearable placeholder="请输入订单号、流水号查询"></el-input>
                                        </div>
                                    </el-col>
                                    <el-col :span="12" >
                                        <div class="grid-content col_float_right">
                                            <el-date-picker
                                            size="mini"
                                            v-model="time"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            >
                                            </el-date-picker>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" class="mg-b-10">
                                    <el-col :span="20">
                                        <div class="grid-content">
                                            <el-select class="select-prefix" size="mini" v-model="storeNo" placeholder="请选择门店" @change="handleChangeSearch" clearable filterable style="margin-right: 30px">
                                                <template slot = "prefix">
                                                    <span class = 'prefixSlot'>选择门店</span>
                                                </template>
                                                <el-option-group
                                                v-for="group in storeList"
                                                :key="group.cityId"
                                                :label="group.city">
                                                    <el-option
                                                        v-for="item in group.list"
                                                        :key="item.storeNo"
                                                        :label="item.storeName"
                                                        :value="item.storeNo">
                                                    </el-option>
                                                </el-option-group>
                                            </el-select>
                                            <el-select size="mini" v-model="storeType" class="select-prefix">
                                                <template slot = "prefix">
                                                    <span class = 'prefixSlot'>门店类型</span>
                                                </template>
                                                <el-option v-for="(item, index) in $Options.storeTypes" :label="item.label" :value='item.value' :key="index"></el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="grid-content col_float_right">
                                            <el-button size="mini" type="primary" icon="el-icon-search" @click="getCashFlowList()">查 询</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="grid-content">
                        <el-table stripe :data="tableData" border >
                            <el-table-column label="门店名称" prop="storeName" width="150"></el-table-column>
                            <el-table-column label="对应日期" width="100">
                                <template slot-scope="scope">
                                    <el-popover
                                    placement="right"
                                    width="150"
                                    offset="0"
                                    trigger="click">
                                        <ul v-if="dateData.length > 0">
                                            <li v-for="(item, index) in dateData " :key="index" style=" font-size: 12px; color: #ff7068; border-bottom: 1px solid #eee" >
                                                {{formate(item.gmtAccount, 'yyyy-MM-dd')}}
                                            </li>
                                        </ul>
                                        <span v-else style=" font-size: 12px; color: #ff7068">暂无日期。。。</span>
                                        <el-button slot="reference" type="text" size="small" @click="getDate(scope.row)">
                                            查看日期
                                        </el-button>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="打款时间" width="150" >
                                <template slot-scope="scope">
                                    {{formate(scope.row.gmtEnd, 'yyyy-MM-dd hh:mm:ss')}}
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="订单号" ></el-table-column> -->
                            <el-table-column label="流水号" prop="transactionNo"></el-table-column>
                        </el-table>
                        <page :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8" style="height:100%">
                <el-card class="card-100 " >
                    <div class="grid-content ">
                        <el-select size="mini" v-model="storeType1" class="select-prefix mg-b-10" @change="handleChange">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>门店类型</span>
                            </template>
                            <el-option v-for="(item, index) in $Options.storeTypes" :label="item.label" :value='item.value' :key="index"></el-option>
                        </el-select>
                        <el-table stripe ref="table1" :loading="loading"  :data="noTableData" style="border-radius: 4px 4px 0 0; overflow: auto " max-height="500">
                            <el-table-column label="待支付现金订单" align="right">
                                <template slot-scope="scope">
                                    <el-row>
                                        <el-col :span="10">
                                            <div class="grid-content" style="float: left">
                                                <span>{{scope.row.storeName}}</span>
                                            </div>
                                        </el-col>
                                        <el-col :span="8" style=" border-left: 1px solid #eee;
                                            border-right: 1px solid #eee; padding-left: 15px">
                                            <div class="grid-content" style="float: left;">
                                                <span style="color: #ff7068">{{scope.row.payableAmount}} 元</span>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div class="grid-content col_float_right">
                                                <span>{{formate(scope.row.gmtAccount, 'yyyy-MM-dd')}}</span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </template>
                            </el-table-column>
                            <template slot="append" >
                                <p v-if="loading" style="font-size: 12px; text-align: center; line-height: 34px">加载中...</p>
                                <p v-if="isNoMore" style="font-size: 12px; text-align: center; line-height: 34px">没有更多了</p>
                            </template>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import page from '../commonComponents/page'
    export default {
        components: { page },
        data() {
            return {
                page: 1,
                size: 10,
                total: 1,
                time: [],
                searchName: '',
                search: '',
                storeNo: '',
                storeList: [],
                tableData: [],
                noTableData: [],
                dateData: [],
                isEnd: false,
                page1: 1,
                loading: false,
                isNoMore: false,
                storeType: 0,
                storeType1: 0
            }
        },
        mounted() {
            this.getStoreListByGroup()
            this.getCashFlowList()
            this.getNoRecordOfPaymentApiList()
            this.loadMore()

        },
        methods: {
             /**获取门店 */
            getStoreListByGroup() {
                this.$server.systemControlApi.getStoreListByGroup().then(res => {
                    this.storeList= res.data
                })
            },
            /**获取打款流水 */
            getCashFlowList() {
                try{
                    let params= {
                        page: this.page,
                        size: this.size,
                        startTime: this.time && this.time.length > 0 ? this.formate(new Date(this.time[0]).getTime(), 'yyyy-MM-dd') : '',
                        endTime: this.time && this.time.length > 0 ? this.formate(new Date(this.time[1]).getTime(), 'yyyy-MM-dd') : '',
                        storeNo: this.storeNo,
                        orderNo: this.searchName,
              
                    }
                    if(this.storeType == 0) {
                        params.storeType= ''
                    }else{
                        params.storeType= this.storeType
                    }
                    this.$server.financialControlApi.getCashFlowList(params).then(res => {
                        this.tableData= res.data
                        this.total= res.total
                    })
                }catch(err) {this.$paramsError(err)}
            },
            handleChange() {
                this.noTableData= []
                this.page1= 1
                this.getNoRecordOfPaymentApiList()
            },
            /**未付款账单 */
            getNoRecordOfPaymentApiList() {
                try {
                    let params= {
                        page: this.page1,
                        size: 15
                    }
                    if(this.storeType1 == 0) {
                        params.storeType= ''
                    }else{
                        params.storeType= this.storeType1
                    }

                    this.$server.financialControlApi.getNoRecordOfPaymentApiList(params).then(res => {
                        if(res.data.length > 0) {
                            this.noTableData= this.noTableData.concat(res.data)
                        }else{
                            this.isEnd= true
                            this.isNoMore= false
                        }
                        if(parseInt(res.total/15) > 0  && this.page1 < Math.ceil(res.total/15)) {
                            this.isEnd= false
                        }else{
                            this.isEnd= true
                        }
                    })
                }catch(err) {this.$paramsError(err)}
            },
            handleChangeSearch() {},
            handlePageChange(page) {
                this.page= page
                this.getCashFlowList()
            },
            handleSizeChange(size) {
                this.size= size
                this.getCashFlowList()
            },
        
            getDate(scope) {
                let params= {
                    paymentNo: scope.paymentNo
                }
                this.$server.financialControlApi.getCashFlowDate(params).then(res => {
                    this.dateData= res.data
                })
            },
            /**下拉加载 */
            loadMore() {
                // 获取需要绑定的table
                this.dom = this.$refs.table1.bodyWrapper
                this.dom.addEventListener('scroll', () => {
                    // 滚动距离
                    let scrollTop = this.dom.scrollTop
                    // 变量windowHeight是可视区的高度
                    let windowHeight = this.dom.clientHeight || this.dom.clientHeight
                    // 变量scrollHeight是滚动条的总高度
                    let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
                    if (scrollTop + windowHeight === scrollHeight) {
                        this.loading= true
                        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
                        // if (!this.allData) this.getMoreLog()
                        if(this.isEnd == false) {
                            console.log(this.page1, 'start')
                            this.page1++
                            console.log(this.page1, 'end')
                            this.getNoRecordOfPaymentApiList()
                            this.loading= false
                        }else{
                            this.isNoMore= true
                            this.loading= false
                        }
                    }
                })
            }
        }
    }
</script>